import { useState, useEffect } from "react";
import { Switch } from 'antd';
import styles from './index.module.less';

const SwitchWrapper = ({ label, switchStatus, fetchApi, switchConfig = {}, style = {}, callback }) => {

  const [checked, setChecked] = useState(undefined);

  useEffect(()=>{
    setChecked(switchStatus);
  }, [])

  const onChange = async () => {
    fetchApi().then(()=>{
      setChecked(!checked);
      callback && callback(data);
    })
  }

  const switchPorps = {
    checked,
    onChange,
    size: 'default',
    checkedChildren: '已开启',
    unCheckedChildren: '已关闭',
    ...switchConfig,
  }

  return (<span className={styles.boxWrapper}>
    <p style={{...style}}>1、{label}：</p>
    <Switch { ...switchPorps }/>
  </span>)
}

export default SwitchWrapper;